/* 1. GLOBAL PAGE SETTINGS */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(1000px 700px at 75% 50%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(115deg, rgba(6,10,20,1) 0%, rgba(10,16,30,.96) 35%, rgba(15,18,35,.92) 60%, rgba(25,15,50,.88) 100%),
    radial-gradient(140% 110% at 50% 100%, rgba(0,0,0,.75), transparent 70%),
    #030611;
  background-attachment: fixed;
  background-size: cover;
  font-family: 'Inter', sans-serif;
  color: #E0E0E0;
}

/* 2. HERO WRAPPER */
.sec-hero-wrapper {
  width: 100%; 
  height: 85vh; /* Further reduced height */
  min-height: 500px;
  position: relative;
  overflow: hidden; 
  background: transparent;
}

body.admin-bar .sec-hero-wrapper {
    height: calc(85vh - 32px);
    margin-top: 32px; 
}

/* 3. 3D CANVAS */
#sec-globe-container {
  position: absolute; 
  inset: 0; 
  z-index: 0;
}

/* 4. CONTENT LAYER */
.sec-hero-content-layer {
  position: relative; 
  z-index: 2; 
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Reduced padding */
  padding: 1.5rem 1rem; 
  pointer-events: none; 
}

.sec-hero-content-layer * {
  pointer-events: auto; 
}

/* 5. TYPOGRAPHY (AGGRESSIVELY ZOOMED OUT) */
.sec-headline {
  font-family: 'Inter', sans-serif;
  font-weight: 900; 
  color: #ffffff;
  line-height: 1.1;
  text-shadow: 0 0 18px rgba(88,166,255,.35), 0 0 28px rgba(139,92,246,.25);
  animation: pulseGlow 4s ease-in-out infinite;
  width: 100%;
  /* MUCH TIGHTER MAX-WIDTH */
  max-width: 700px; 
  margin: 0 auto 1rem auto;
}

.sec-subtext { 
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  color: #b7c0cc;
  text-shadow: 0 0 10px rgba(0,0,0,.8);
  /* MUCH TIGHTER MAX-WIDTH */
  max-width: 550px;
  margin: 0 auto;
}

/* ANIMATIONS */
.animate-fadeInUp { 
  opacity: 0; 
  animation: fadeInUp 1s ease-out forwards; 
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); } /* Reduced movement */
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
  0%,100% { text-shadow:0 0 18px rgba(88,166,255,.35), 0 0 28px rgba(139,92,246,.25) }
  50% { text-shadow:0 0 32px rgba(88,166,255,.55), 0 0 45px rgba(139,92,246,.45) }
}